<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script>

    </script>
</head>
<body>
<!--1. 准备一个容器-->
<div id="app">
    <div>
        <input type="text" v-model="age">
        <input type="text" v-model="user.age">
    </div>
</div>
<script>
    // 2. 定义一个Vue对象
    let vm = new Vue({
        el: "#app",
        data: {
            age: 10,
            user: {
                age: 100,
            }
        },
        watch: { // 监听器
            // 监听器： 监听Vue对象中age属性值的变化
            age: function (newValue, oldValue) {
                console.log("新值：" + newValue);
                console.log("老值：" + oldValue);
            },
            // 监听器： 监听Vue对象中user对象中的age属性值的变化
            "user.age": function (newValue, oldValue) {
                console.log("新值：" + newValue);
                console.log("老值：" + oldValue);
            }
        }
    });
</script>
</body>
</html>